<template>
  <div class="fix-all mpj-dialog" v-show="options.show">
  <!-- <div class="fix-all mpj-dialog" v-show=true> -->
    <div class="weui_mask"></div>
    <div class="dialog-content divtcr">
      <p class="title"><i class="icon" :class="iconClass"></i><span class="vm">{{opts.content}}</span></p>
      <p  class="btn-content" v-show="opts.btnContent" v-gesture:tap.stop.prevent="opts.btnFn()">{{opts.btnContent}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    props:{
      options:{
        type: Object,
          default: function () {
            return {
              iconType: 'warn1' ,
              content:"请申请退款",
              btnContent:"申请退款",
              btnFn:function(){
                alert("哈哈哈");
              },
              show:true
            }
        }
      }
    },
    computed:{
      opts(){
        //todo minxin
        return this.options;
      },
      iconClass(){
        return {
          'weui_icon weui_icon_warn': this.opts.iconType == 'warn',
          'weui_icon weui_icon_cancel': this.opts.iconType == 'cancel',
          'weui_icon weui_icon_kitchen': this.opts.iconType == 'kitchen',
          'weui_icon weui_icon_success': this.opts.iconType == 'success',
          'weui_icon weui_icon_waiting':this.opts.iconType == 'waiting'
        }
      }
    }
  }
</script>

<style lang='sass'>
	@import '../../assets/sass/global/themes.scss';
  .mpj-dialog{

    .weui_mask{z-index: 50;}
    .dialog-content{
      background:white;top:35%;z-index: 200;position: absolute;width: 100%;width: 80%;text-align: center;border-radius: 5px;font-size: 16px;

      .title{
        position: reative;line-height: 100px;
        .icon:before{margin-right:10px;}
      }
      .btn-content{line-height: 45px;color: $font-color-primary;border-top: 1px solid #e0e0e0}
      .weui_icon_waiting:before{color: $font-color-primary;}
    }
  }
</style>
